import { FC, lazy, Suspense } from "react";

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";

import Layout from "../layout/index";

import Auth from "./auth";
// import Login from "../pages/login"; // pages/login.tsx   pages/login/index.tsx
// import Home from "../pages/home"; // pages/index.tsx   pages/index/index.tsx
// import Todos from "../pages/todos"; // pages/index.tsx   pages/index/index.tsx
const Login = lazy(() => import("../pages/login"));
const Home = lazy(() => import("../pages/home"));
const Todos = lazy(() => import("../pages/todos"));

// 父的path + 子的path
// 父在根组件显示，
// 子在父显示
// routes: [
//   {
//     path: '/admin',
//     component: () => import() ,
//     children: [
//       {path: '路径',component: () => import()}
//     ]
//   }
//   {
//     path: '/login',
//     component: () => import()
//   }
// ]

interface Props {}
const ReactRouter: FC<Props> = () => {
  return (
    <>
      <Suspense fallback={<h1>Loading...</h1>}>
        <Router>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/login" element={<Login />} />
            <Route path="/todos" element={<Todos />} />
            <Route path="/404" element={<h1>404</h1>} />
            <Route
              path="/admin"
              element={
                <Auth>
                  <Layout />
                </Auth>
              }
            >
              <Route path="user" element={<h1>user</h1>} />
              <Route path="order" element={<h1>order</h1>} />
            </Route>
            <Route path="*" element={<Navigate to="/404" />} />
          </Routes>
        </Router>
      </Suspense>
    </>
  );
};

export default ReactRouter;
